<script setup>
import { ref, watch, onMounted, provide } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DocumentPage from '@/components/common/DocumentPage.vue'
import { useAuthStore } from '@/stores/auth'

import svg1 from '@/assets/svg/project_team.svg'
import svg2 from '@/assets/svg/login.svg'
import svg3 from '@/assets/svg/windows.svg'

const route = useRoute()
const router = useRouter()

const authStore = useAuthStore()

const navActive = ref(route.name)

const pictures = ref([svg1, svg2, svg3])

// 弹窗显示协议
const agreementRef = ref(null)

const authRedirect = () => {
  if (authStore.isAuthenticated) {
    router.replace({ name: 'user' })
  } else if (route.name === 'auth' || route.name === '') {
    router.replace({ name: 'authLogin' })
  }
}

watch(
  () => route.name,
  (name) => {
    navActive.value = name
    authRedirect()
  }
)

onMounted(() => authRedirect())

provide('showAgreement', (name) => {
  agreementRef.value.show(name)
})
</script>

<template>
  <el-scrollbar>
    <div class="flex justify-between pt-5 px-3 sm:p-5 h-full max-w-[900px] mx-auto">
      <div class="w-1/2 hidden sm:block mt-12">
        <el-carousel arrow="never">
          <el-carousel-item v-for="pic in pictures">
            <img :src="pic" class="w-full h-full" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="flex flex-col w-full sm:w-1/2 px-0 sm:pl-8 mx-2">
        <RouterView />
        <div class="flex justify-between text-[--el-text-color-secondary] text-sm">
          <div v-if="['authLogin', 'authForget'].indexOf(navActive) >= 0">
            没有账号？
            <RouterLink :to="{ name: 'authRegister' }" class="switch-action">马上注册</RouterLink>
          </div>
          <div v-if="['authLogin'].indexOf(navActive) >= 0">
            忘记密码？
            <RouterLink :to="{ name: 'authForget' }" class="switch-action">重置密码</RouterLink>
          </div>
          <div v-if="['authRegister', 'authForget'].indexOf(navActive) >= 0">
            已有账号？
            <RouterLink :to="{ name: 'authLogin' }" class="switch-action">立刻登录</RouterLink>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
  <DocumentPage ref="agreementRef" />
</template>

<style scoped>
.switch-action {
  @apply cursor-pointer text-[--el-color-primary];
}
</style>
